<template>
  <view class="root-page">
    <nav-bar color="white"></nav-bar>

    <view class="content">
      <view class="title">
        <text class="title-name"> {{ accountInfo.abbreviation || accountInfo.businessName }}</text>
        <view :class="['title-va-card', accountInfo.vaCard ? 'va-card-on' : 'va-card-off']">
          VA卡：{{ accountInfo.vaCard ? "已开通" : "未开通" }}
        </view>
      </view>

      <!-- 菜单列表 -->
      <view class="menu-list">
        <view v-if="!menus || menus.length === 0" class="loading-box">
          <u-loading-icon
            mode="circle"
            text="正在加载菜单"
            blod
            custom-style="border-width:5px;"
            size="50rpx"
            inactive-color="var(--kui-color-theme)"
            vertical
          />
        </view>
        <swiper v-else :indicator-dots="true" indicator-color="grey" indicator-active-color="white" class="swiper">
          <swiper-item v-for="(menu, index) in menus" :key="index">
            <u-grid :border="false" :col="4">
              <u-grid-item v-for="(item, iti) in menu" :index="iti" :key="iti" @click="toPage(item)">
                <view
                  class="flex flex-col justify-center items-center mb-20rpx"
                  :style="{
                    backgroundColor: item.bgColor || 'white',
                    height: 'fit-content',
                    width: 'fit-content',
                    padding: '15rpx 30rpx',
                    borderRadius: '10rpx',
                  }"
                >
                  <view
                    class="flex-col"
                    :style="{
                      backgroundColor: item.iconColor || 'var(--kui-color-theme)',
                      padding: '10rpx',
                      borderRadius: '10rpx',
                    }"
                  >
                    <text :class="['block', 'iconzhucan', item.icon]" :style="{ fontSize: '20rpx' }"></text>
                  </view>
                  <text class="grid-text block text-center">{{ item.label }}</text>
                </view>
              </u-grid-item>
            </u-grid>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>
<script setup>
import { computed, onMounted, ref } from "vue";
import { useStore } from "vuex";
import { modeMeun } from "./mode-menu";
import init from "@/common/init/homeInit";

// 商家信息
const accountInfo = computed(() => store.getters.businessInfo);

// 菜单
const menus = ref([]);

const toPage = (item) => {
  uni.navigateTo({
    url: item.url,
    animationType: "pop-in",
    animationDuration: 200,
  });
};

const store = useStore();
onMounted(async () => {
  // 获取当前用户的商家信息
  try {
    // 如果当前已有则不获取 （退出登录会清除，且 init/manInit 会刷新）【2024/10/29 退出登录清除失败】
    // if (store.getters.businessInfo?.businessId) throw new Error("已获取商家信息");
    // 获取当前用户的商家信息
    await store.dispatch("business/updateBusinessInfo");
  } catch (error) {
    console.error(error);
  }

  // 根据当前模式加载菜单 默认为 0 店员模式
  const currMode = store.getters.consumptionPattern;
  console.log("当前模式菜单", currMode, modeMeun);
  const currMenu = modeMeun[currMode || 0 + ""];
  if (currMenu) {
    menus.value = currMenu;
  } else {
    menus.value = modeMeun[0];
  }

  // 其他初始化逻辑
  init.onLoad();
});
</script>
<style lang="scss" scoped>
.root-page {
  background-color: #0d1822;
  background-image: url(/static/images/public/function_bg.png);
  background-size: cover;
  color: white;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.content {
  min-height: 90vh;
  height: 100%;
  padding: 0 70rpx;
  display: flex;
  flex-direction: column;
  position: relative;

  .title {
    display: flex;
    flex-direction: column;
    justify-content: start;
    margin-bottom: 20rpx;
    padding: 0px 20rpx;
    position: relative;

    .title-name {
      font-size: 18rpx;
      color: #fff;
      font-weight: bold;
    }

    .title-va-card {
      font-size: 12rpx;
      color: black;
      padding: 3rpx 6rpx;
      border-radius: 5rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      margin-top: 10rpx;

      &.va-card-on {
        color: #fff;
        background-color: #ffbe62;
      }

      &.va-card-off {
        color: #fff;
        background-color: #909399;
      }
    }
  }

  .menu-list {
    .loading-box {
      height: 50vh;
      display: flex;
      justify-content: center;
      align-items: center;

      ::v-deep .u-loading-icon__spinner--circle {
        border-width: 10px;
        margin-bottom: 10rpx;
      }
    }
    // ::v-deep .menu-item-class {
    //   // background-color: white !important;
    //   // border-radius: 10rpx;
    //   // margin: 20rpx;
    // }
    ::v-deep .mxio-scrollx-box {
      color: white;
    }

    .swiper {
      height: 260rpx;
    }

    .grid-text {
      font-size: 15rpx;
      color: #909399;
      margin-top: 5rpx;
      /* #ifndef APP */
      box-sizing: border-box;
      /* #endif */
    }
  }
}
</style>
